<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店管理系统 - 注册</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
                url('https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: white;
        }

        .form-container {
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            padding: 40px;
            width: 100%;
            max-width: 550px;
            position: relative;
            overflow: hidden;
        }

        .form-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, #1890ff, #722ed1);
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
        }

        .header h1 {
            color: #1890ff;
            font-size: 28px;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .header p {
            color: #666;
            font-size: 16px;
        }

        .divider {
            text-align: center;
            margin: 25px 0;
            position: relative;
            color: #1890ff;
            font-size: 18px;
            font-weight: 500;
        }

        .divider::before,
        .divider::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 35%;
            height: 1px;
            background: linear-gradient(to right, transparent, #1890ff);
        }

        .divider::before {
            left: 0;
        }

        .divider::after {
            right: 0;
            background: linear-gradient(to left, transparent, #1890ff);
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
            font-size: 16px;
        }

        .input-group {
            position: relative;
        }

        .input-group i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #1890ff;
            font-size: 16px;
        }

        input,
        select {
            width: 100%;
            padding: 14px 20px 14px 45px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s;
            outline: none;
        }

        input:focus,
        select:focus {
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }

        .radio-group {
            display: flex;
            gap: 30px;
            margin-top: 10px;
        }

        .radio-option {
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .radio-option input[type="radio"] {
            display: none;
        }

        .radio-custom {
            width: 22px;
            height: 22px;
            border: 2px solid #1890ff;
            border-radius: 50%;
            margin-right: 10px;
            position: relative;
        }

        .radio-custom::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 12px;
            height: 12px;
            background: #1890ff;
            border-radius: 50%;
            opacity: 0;
            transition: opacity 0.2s;
        }

        input[type="radio"]:checked+.radio-custom::after {
            opacity: 1;
        }

        .flag-container {
            display: flex;
            align-items: center;
        }

        .flag {
            width: 40px;
            height: 25px;
            border-radius: 3px;
            margin-right: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .btn-submit {
            background: linear-gradient(90deg, #1890ff, #722ed1);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 14px 30px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
            margin-top: 10px;
            letter-spacing: 1px;
        }

        .btn-submit:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(24, 144, 255, 0.4);
        }

        .form-footer {
            text-align: center;
            margin-top: 25px;
            color: #666;
            font-size: 15px;
        }

        .form-footer a {
            color: #1890ff;
            text-decoration: none;
            font-weight: 500;
        }

        .form-footer a:hover {
            text-decoration: underline;
        }

        .logo {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            font-size: 24px;
            font-weight: bold;
            display: flex;
            align-items: center;
        }

        .logo i {
            margin-right: 10px;
            color: #1890ff;
        }

        .error-message {
            color: #f5222d;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }

        .input-error {
            border-color: #f5222d !important;
        }

        .input-error:focus {
            box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2) !important;
        }

        .success-message {
            background-color: #52c41a;
            color: white;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            margin-bottom: 20px;
            display: none;
        }

        .ip-info {
            display: flex;
            align-items: center;
            margin-top: 5px;
            font-size: 12px;
            color: #666;
        }

        .ip-info i {
            margin-right: 5px;
            color: #1890ff;
        }

        @media (max-width: 600px) {
            .form-container {
                padding: 30px 20px;
            }

            .radio-group {
                flex-direction: column;
                gap: 15px;
            }

            input,
            select {
                padding: 12px 15px 12px 40px;
            }
        }
    </style>
</head>

<body>
    <div class="logo">
        <i class="fas fa-hotel"></i>
        <span>TUMING-Hotel</span>
    </div>

    <div class="form-container">
        <div class="header">
            <h1>酒店管理系统</h1>
            <p>创建您的管理账户</p>
        </div>

        <div class="success-message" id="successMessage">
            <i class="fas fa-check-circle"></i> 注册成功！
        </div>

        <div class="divider">填写信息</div>

        <form id="registerForm">


            <!-- Language Selection -->
            <div class="form-group">
                <label for="language">语言</label>
                <div class="radio-group">
                    <label class="radio-option1">
                        <!-- <input type="radio" name="language" value="zh-CN" checked> -->
                        <div class="flag-container">
                            <img src="https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/4x3/cn.svg" alt="中文"
                                class="flag">
                            简体中文
                        </div>
                    </label>
                    <label class="radio-option2">
                        <!-- <input type="radio" name="language" value="en-US"> -->
                        <div class="flag-container">
                            <img src="https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/4x3/us.svg" alt="English"
                                class="flag">
                            English
                        </div>
                    </label>
                    <label class="radio-option3">
                        <!-- <input type="radio" name="language" value="en-US"> -->
                        <div class="flag-container">
                            <img src="./icon/jp.png" alt="日本語" class="flag">
                            日本語
                        </div>
                    </label>
                </div>
            </div>
            <!-- IP Address Field -->
            <div class="form-group">
                <label for="ipAddress">服务器IP地址</label>
                <div class="input-group">
                    <i class="fas fa-server"></i>
                    <input type="text" id="ipAddress" placeholder="请输入服务器IP地址（例如：192.168.1.1）">
                </div>
                <div class="error-message" id="ipAddressError">请输入有效的IP地址</div>
                <div class="ip-info">
                    <!-- <i class="fas fa-info-circle"></i>
                    <span>这是您酒店管理服务器的IP地址，用于系统连接</span> -->
                </div>
            </div>
            <!-- Hotel Name -->
            <!-- <div class="form-group">
                    <label for="hotelName">酒店名称</label>
                    <div class="input-group">
                        <i class="fas fa-hotel"></i>
                        <input type="text" id="hotelName" placeholder="请输入酒店名称">
                    </div>
                    <div class="error-message" id="hotelNameError">请输入酒店名称</div>
                </div> -->

            <!-- Login Account -->
            <!-- <div class="form-group">
                    <label for="account">登录账号</label>
                    <div class="input-group">
                        <i class="fas fa-user"></i>
                        <input type="text" id="account" placeholder="请输入登录账号">
                    </div>
                    <div class="error-message" id="accountError">请输入登录账号</div>
                </div> -->

            <!-- Password -->
            <!-- <div class="form-group">
                    <label for="password">登录密码</label>
                    <div class="input-group">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="password" placeholder="请输入密码（至少6位）">
                    </div>
                    <div class="error-message" id="passwordError">密码长度至少为6位</div>
                </div> -->

            <!-- Confirm Password -->
            <!-- <div class="form-group">
                    <label for="confirmPassword">确认密码</label>  
                    <div class="input-group">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="confirmPassword" placeholder="请再次输入密码">
                    </div>
                    <div class="error-message" id="confirmPasswordError">两次输入的密码不一致</div>
                </div> -->

            <button type="submit" class="btn-submit">
                <i class="fas fa-user-plus"></i> 提交注册
            </button>
        </form>
        <!--         
        <div class="form-footer">
            已有账户？ <a href="#" id="loginLink">立即登录</a>
        </div> -->
    </div>

    <script>
        let a = document.getElementsByClassName("header")[0]

        a.addEventListener('click', function () {
            //    window.location.href = "http://192.168.0.154:8000/login"
        });
        let Test = async (config) => {

            window.electronAPI.Test_Api().then((response) => {
                console.log("response ->", response);

                if (response.status == "error") {
                      alert("Service Error -> Not running")
                        setTimeout(() => {
                            // window.electronAPI.quitApp()
                        }, 500)

                } 

                if (response.status == "success") {
                    return  window.location.href = config.IP
                }

            }).catch((error) => {
                console.log("error ->", error);
            });

        }

        try {



            if(localStorage.getItem('umi_locale') == null){
                localStorage.setItem('umi_locale', "zh-CN");
             
            }


            window.electronAPI.readConfig().then((config) => {
                console.log("config ->", config);
                if (config) {

                  Test(config)
                   

                }
            });


        } catch (e) {
            console.log("e ->", e);

        }






        // 语言切换
        // setTimeout(() => {
        //     const languageRadios = document.querySelectorAll('input[name="language"]');
        //     console.log(languageRadios);

        //     languageRadios.forEach(radio => {

        //         console.log("radio ->", radio);
        //         radio.addEventListener('change', function () {
        //             localStorage.setItem('umi_locale', this.value);

        //             // 根据选择的语言更新UI
        //             if (this.value === 'en-US') {
        //                 updateUIToEnglish();
        //             } else {

        //             }
        //         });
        //     });
        // })

        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('registerForm');
            const successMessage = document.getElementById('successMessage');
            const loginLink = document.getElementById('loginLink');

            // 设置语言
          
            // document.querySelector(`input[name="language"][value="${savedLocale}"]`).checked = true;

            // 表单验证和提交
            form.addEventListener('submit', async function (e) {
                e.preventDefault();

                // 重置错误状态
                resetErrors();

                // 获取表单值
                const ipAddress = document.getElementById('ipAddress').value.trim();
                // const hotelName = document.getElementById('hotelName').value.trim();
                // const account = document.getElementById('account').value.trim();
                // const password = document.getElementById('password').value;
                // const confirmPassword = document.getElementById('confirmPassword').value;
                // const language = localStorage.getItem('umi_locale')
                // console.log("savedLocale ->", savedLocale);
             const language = localStorage.getItem('umi_locale') || 'zh-CN';
                console.log("language ->", language);
                // 验证表单
                let isValid = true;

                // IP地址验证
                const ipPattern = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
                if (!ipAddress) {


                    showError('ipAddressError', language == "en-US" ? "Please enter an IP address" : '请输入IP地址');
                    document.getElementById('ipAddress').classList.add('input-error');
                    isValid = false;
                } else if (!ipPattern.test(ipAddress)) {
                    showError('ipAddressError', language == "en-US" ? "Please enter a valid IP address" : '请输入有效的IP地址');
                    document.getElementById('ipAddress').classList.add('input-error');
                    isValid = false;
                }

                // if (!hotelName) {

                //     showError('hotelNameError', language === 'en-US' ? 'Please enter hotel name' : '请输入酒店名称');

                //     document.getElementById('hotelName').classList.add('input-error');
                //     isValid = false;
                // }

                // if (!account) {
                //     showError('accountError', language === 'en-US' ? 'Please enter login account' : '请输入登录账号');

                //     document.getElementById('account').classList.add('input-error');
                //     isValid = false;
                // }

                // if (password.length < 6) {
                //     showError('passwordError', language === 'en-US' ? 'Password must be at least 6 characters' : '密码长度至少为6位');

                //     document.getElementById('password').classList.add('input-error');
                //     isValid = false;
                // }

                // if (password !== confirmPassword) {
                //     showError('confirmPasswordError', language === 'en-US' ? 'Passwords do not match' : '两次输入的密码不一致');

                //     document.getElementById('confirmPassword').classList.add('input-error');
                //     isValid = false;
                // }

                // 表单验证通过
                if (isValid) {
                    // 保存语言设置


                    // 显示成功消息
                    successMessage.style.display = 'block';
                    let IP = "http://" + ipAddress + "/#/";
                    // 3秒后跳转（模拟）
                    successMessage.style.display = 'none';
                    // alert('注册成功！即将跳转到登录页面...');
                    // 在实际应用中，这里应该进行表单提交
                    console.log('Form submitted:', {
                        ipAddress,
                        // hotelName,
                        // account,
                        // password,
                        // language
                    });
                    let getVersion = await window.electronAPI.getVersion()
                        console.log(getVersion);
                    const dynamicConfig = {
                        Version:getVersion,
                        IP,
                        ServiceIp: "http://" + ipAddress + ":6110/cmd",
                        umi_locale: language
                    };

                    window.electronAPI.writeConfig(dynamicConfig)

                

                    setTimeout(() => {
                        // 模拟跳转到登录页面
                        window.location.href = IP
                    }, 500);
                }
            });


            // 登录链接
            loginLink.addEventListener('click', function (e) {
                e.preventDefault();
                alert('即将跳转到登录页面...');
            });

            // 辅助函数
            function showError(elementId, message) {
                const errorElement = document.getElementById(elementId);
                errorElement.textContent = message;
                errorElement.style.display = 'block';
            }

            function resetErrors() {
                const errorElements = document.querySelectorAll('.error-message');
                errorElements.forEach(el => {
                    el.style.display = 'none';
                });

                const inputElements = document.querySelectorAll('input');
                inputElements.forEach(el => {
                    el.classList.remove('input-error');
                });
            }


            // 初始化语言
            // if (savedLocale === 'en-US') {
            //     updateUIToEnglish();
            // }
        });

        let b = document.getElementsByClassName("radio-option1")[0]
        let c = document.getElementsByClassName("radio-option2")[0]
        let D = document.getElementsByClassName("radio-option3")[0]
        // 中文
        b.addEventListener('click', function () {
            b.style.color = "#1890ff"
            c.style.color = "black"
            D.style.color = "black"
            localStorage.setItem('umi_locale', "zh-CN");
            updateUIToChinese();
        })
        // 英语
        c.addEventListener('click', function () {
            c.style.color = "#1890ff"
            b.style.color = "black"
            D.style.color = "black"
            localStorage.setItem('umi_locale', "en-US");
            updateUIToEnglish();
        })
        // 日语
        D.addEventListener('click', function () {
            D.style.color = "#1890ff"
            c.style.color = "black"
            b.style.color = "black"
            localStorage.setItem('umi_locale', "ja-JP");
            updateUIToJapanese();
        })
        // 更新UI为英文
        function updateUIToEnglish() {


            // 标题和描述
            document.querySelector('.header h1').textContent = 'Hotel Management System';
            document.querySelector('.header p').textContent = 'Create your admin account';
            document.querySelector('.divider').textContent = 'Fill Information';
            document.querySelector('#ipAddress').placeholder = 'Enter server IP address (e.g., 192.168.1.1)';
            document.querySelector('.btn-submit').innerHTML = '<i class="fas fa-user-plus"></i> Submit';
            // 表单字段标签
            document.querySelector('label[for="ipAddress"]').textContent = 'Server IP Address';
            document.querySelector('label[for="language"]').textContent = 'Language';
            document.querySelector('label[for="hotelName"]').textContent = 'Hotel Name';
            document.querySelector('label[for="account"]').textContent = 'Login Account';
            document.querySelector('label[for="password"]').textContent = 'Password';
            document.querySelector('label[for="confirmPassword"]').textContent = 'Confirm Password';

            // 占位符文本

            document.querySelector('#hotelName').placeholder = 'Enter hotel name';
            document.querySelector('#account').placeholder = 'Enter login account';
            document.querySelector('#password').placeholder = 'Enter password (at least 6 characters)';
            document.querySelector('#confirmPassword').placeholder = 'Confirm password';

            // 按钮文本

            // 页脚文本
            document.querySelector('.form-footer').innerHTML = 'Already have an account? <a href="#" id="loginLink">Login now</a>';

            // 错误提示文本
            document.getElementById('ipAddressError').textContent = 'Please enter a valid IP address';
            document.getElementById('hotelNameError').textContent = 'Please enter hotel name';
            document.getElementById('accountError').textContent = 'Please enter login account';
            document.getElementById('passwordError').textContent = 'Password must be at least 6 characters';
            document.getElementById('confirmPasswordError').textContent = 'Passwords do not match';

            // IP信息提示
            document.querySelector('.ip-info span').textContent = 'This is your hotel management server IP address for system connection';
        }

        // 更新UI为中文
        function updateUIToChinese() {
            // 标题和描述
            document.querySelector('.header h1').textContent = '酒店管理系统';
            document.querySelector('.header p').textContent = '创建您的管理账户';
            document.querySelector('.divider').textContent = '填写信息';
            document.querySelector('.btn-submit').innerHTML = '<i class="fas fa-user-plus"></i> 提交注册';
            document.querySelector('#ipAddress').placeholder = '请输入服务器IP地址（例如：192.168.1.1）';
            // 表单字段标签
            document.querySelector('label[for="ipAddress"]').textContent = '服务器IP地址';
            document.querySelector('label[for="language"]').textContent = '语言';
            document.querySelector('label[for="hotelName"]').textContent = '酒店名称';
            document.querySelector('label[for="account"]').textContent = '登录账号';
            document.querySelector('label[for="password"]').textContent = '登录密码';
            document.querySelector('label[for="confirmPassword"]').textContent = '确认密码';

            // 占位符文本

            document.querySelector('#hotelName').placeholder = '请输入酒店名称';
            document.querySelector('#account').placeholder = '请输入登录账号';
            document.querySelector('#password').placeholder = '请输入密码（至少6位）';
            document.querySelector('#confirmPassword').placeholder = '请再次输入密码';

            // 按钮文本

            // 页脚文本
            document.querySelector('.form-footer').innerHTML = '已有账户？ <a href="#" id="loginLink">立即登录</a>';

            // 错误提示文本
            document.getElementById('ipAddressError').textContent = '请输入有效的IP地址';
            document.getElementById('hotelNameError').textContent = '请输入酒店名称';
            document.getElementById('accountError').textContent = '请输入登录账号';
            document.getElementById('passwordError').textContent = '密码长度至少为6位';
            document.getElementById('confirmPasswordError').textContent = '两次输入的密码不一致';

            // IP信息提示
            document.querySelector('.ip-info span').textContent = '这是您酒店管理服务器的IP地址，用于系统连接';
        }
        function updateUIToJapanese() {
            // タイトルと説明
            document.querySelector('.header h1').textContent = 'ホテル管理システム';
            document.querySelector('.header p').textContent = '管理者アカウントを作成';
            document.querySelector('.divider').textContent = '情報入力';

            document.querySelector('.btn-submit').innerHTML = '<i class="fas fa-user-plus"></i> 登録を送信';
            document.querySelector('#ipAddress').placeholder = 'サーバーIPアドレスを入力 (例: 192.168.1.1)';
            // フォームフィールドラベル
            document.querySelector('label[for="ipAddress"]').textContent = 'サーバーIPアドレス';
            document.querySelector('label[for="language"]').textContent = '言語';
            document.querySelector('label[for="hotelName"]').textContent = 'ホテル名';
            document.querySelector('label[for="account"]').textContent = 'ログインアカウント';
            document.querySelector('label[for="password"]').textContent = 'ログインパスワード';
            document.querySelector('label[for="confirmPassword"]').textContent = 'パスワード確認';

            // プレースホルダーテキスト
            document.querySelector('#hotelName').placeholder = 'ホテル名を入力';
            document.querySelector('#account').placeholder = 'ログインアカウントを入力';
            document.querySelector('#password').placeholder = 'パスワードを入力 (6文字以上)';
            document.querySelector('#confirmPassword').placeholder = 'パスワードを再入力';

            // ボタンテキスト

            // フッターテキスト
            document.querySelector('.form-footer').innerHTML = '既にアカウントをお持ちですか？ <a href="#" id="loginLink">ログイン</a>';

            // エラーメッセージ
            document.getElementById('ipAddressError').textContent = '有効なIPアドレスを入力してください';
            document.getElementById('hotelNameError').textContent = 'ホテル名を入力してください';
            document.getElementById('accountError').textContent = 'ログインアカウントを入力してください';
            document.getElementById('passwordError').textContent = 'パスワードは6文字以上必要です';
            document.getElementById('confirmPasswordError').textContent = 'パスワードが一致しません';

            // IP情報ヒント
            document.querySelector('.ip-info span').textContent = 'これはホテル管理サーバーのIPアドレスです。システム接続に使用されます';
        }
    </script>
</body>

</html>